<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<form *ngIf="apiDetailsForm" [formGroup]="parentForm" autocomplete="off" gioFormFocusInvalid>
  <mat-card class="details-card" [formGroup]="apiDetailsForm">
    <mat-card-content>
      <div class="details-card__header">
        <div class="details-card__header__info-inputs">
          <div class="details-card__header__info-inputs__first-row">
            <mat-form-field class="details-card__header__info-inputs__first-row__name-field">
              <mat-label>Name</mat-label>
              <input #apiName matInput formControlName="name" data-testid="api_info_namefield" required />
              <mat-error *ngIf="apiDetailsForm.controls.name.hasError('required')">Name is required.</mat-error>
            </mat-form-field>

            <mat-form-field class="details-card__header__info-inputs__first-row__version-field">
              <mat-label>Version</mat-label>
              <input #apiVersion matInput formControlName="version" data-testid="api_info_versionfield" required maxlength="32" />
              <mat-error *ngIf="apiDetailsForm.controls.version.hasError('required')">Version is required.</mat-error>
              <mat-error *ngIf="apiDetailsForm.controls.version.hasError('version')">{{
                apiDetailsForm.controls.version.getError('version')
              }}</mat-error>
            </mat-form-field>
          </div>
          <div class="details-card__header__info-inputs__second-row">
            <mat-form-field class="details-card__header__info-inputs__second-row__description-field">
              <mat-label>Description</mat-label>
              <textarea matInput formControlName="description" data-testid="api_info_descriptionfield"></textarea>
            </mat-form-field>

            <mat-form-field class="details-card__header__info-inputs__second-row__labels-field">
              <mat-label>Labels</mat-label>
              <gio-form-tags-input
                formControlName="labels"
                data-testid="api_info_labelsfield"
                [addOnBlur]="false"
                [autocompleteOptions]="labelsAutocompleteOptions"
              ></gio-form-tags-input>
            </mat-form-field>

            <mat-form-field class="details-card__header__info-inputs__second-row__categories-field">
              <mat-label>Categories</mat-label>
              <mat-select formControlName="categories" data-testid="api_info_categoriesdropdown" multiple>
                <mat-option data-testid="api_info_categorieslist-unavailable" *ngIf="apiCategories.length === 0" disabled
                  >No categories available</mat-option
                >
                <mat-option *ngFor="let category of apiCategories" [value]="category.key"
                  >{{ category.name }}<em *ngIf="category.description">- {{ category.description }}</em></mat-option
                >
              </mat-select>
            </mat-form-field>

            <gio-form-slide-toggle
              *ngIf="canDisplayV4EmulationEngineToggle"
              class="details-card__header__info-inputs__second-row__emulate-v4-engine-field"
            >
              Emulate v4 engine
              <mat-slide-toggle
                gioFormSlideToggle
                formControlName="emulateV4Engine"
                aria-label="Emulate v4 engine"
                name="emulateV4Engine"
              ></mat-slide-toggle>
            </gio-form-slide-toggle>
          </div>
        </div>
        <div class="details-card__header__right-coll">
          <div class="details-card__header__right-coll__media" [formGroup]="apiImagesForm">
            <gio-form-file-picker class="details-card__header__right-coll__media__picture" formControlName="picture" accept="image/*">
              <gio-form-file-picker-label>API picture</gio-form-file-picker-label>
              <gio-form-file-picker-add-button class="details-card__header__right-coll__media__picture__btn">
                <span class="details-card__header__right-coll__media__picture__btn__text"> Click here or drag an image </span>
                <gio-avatar
                  class="details-card__header__right-coll__media__picture__btn__default-avatar"
                  [size]="114"
                  [name]="apiName.value + ' ' + apiVersion.value"
                ></gio-avatar>
              </gio-form-file-picker-add-button>
              <gio-form-file-picker-empty>
                <gio-avatar [size]="114" [name]="apiName.value + ' ' + apiVersion.value"></gio-avatar>
              </gio-form-file-picker-empty>
            </gio-form-file-picker>
            <gio-form-file-picker class="details-card__header__right-coll__media__background" formControlName="background" accept="image/*">
              <gio-form-file-picker-label>API background</gio-form-file-picker-label>
              <gio-form-file-picker-add-button class="details-card__header__right-coll__media__background__btn">
                <span class="details-card__header__right-coll__media__background__btn__text"> Click here or drag an image </span>
              </gio-form-file-picker-add-button>
              <gio-form-file-picker-empty><span>No background defined</span></gio-form-file-picker-empty>
            </gio-form-file-picker>
          </div>

          <div class="details-card__header__right-coll__info">
            <dl class="gio-description-list">
              <dt>Owner</dt>
              <dd gioClipboardCopyWrapper [contentToCopy]="apiOwner">{{ apiOwner }}</dd>

              <dt>Created</dt>
              <dd>{{ apiCreatedAt | date: 'medium' }}</dd>

              <dt>Last connection</dt>
              <dd>{{ apiLastDeploymentAt | date: 'medium' }}</dd>
            </dl>
          </div>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions class="details-card__actions" *ngIf="api.definitionVersion !== 'FEDERATED'">
      <button
        *gioPermission="{ anyOf: ['api-definition-r'] }"
        mat-button
        class="details-card__actions_btn"
        data-testid="api_info_export_menu"
        (click)="exportApi()"
      >
        <mat-icon svgIcon="gio:upload"></mat-icon> Export
      </button>
      <button
        *gioPermission="{ anyOf: ['api-definition-c'] }"
        mat-button
        class="details-card__actions_btn"
        [disabled]="isKubernetesOrigin || api.definitionVersion === 'V4' || api.definitionVersion === 'V1'"
        (click)="importApi()"
      >
        <mat-icon svgIcon="gio:download"></mat-icon> Import
      </button>
      <button
        *gioPermission="{ anyOf: ['api-definition-c'] }"
        mat-button
        class="details-card__actions_btn"
        [disabled]="isKubernetesOrigin || api.definitionVersion === 'V1'"
        data-testid="api_info_duplicate_menu"
        (click)="duplicateApi()"
      >
        <mat-icon svgIcon="gio:copy"></mat-icon> Duplicate
      </button>
      <button
        *gioPermission="{ anyOf: ['api-definition-u'] }"
        mat-button
        class="details-card__actions_btn"
        [disabled]="!canPromote || isKubernetesOrigin || api.definitionVersion === 'V4' || api.definitionVersion === 'V1'"
        data-testid="api_info_promote"
        (click)="promoteApi()"
      >
        <mat-icon svgIcon="gio:language"></mat-icon> Promote
      </button>
    </mat-card-actions>
  </mat-card>

  <api-general-info-quality
    *ngIf="isQualityEnabled && isQualitySupported && apiId"
    class="api-quality"
    [apiId]="apiId"
  ></api-general-info-quality>

  <api-general-info-danger-zone class="danger-zone" [api]="api" (reloadDetails)="ngOnInit()"></api-general-info-danger-zone>

  <gio-save-bar
    [form]="parentForm"
    data-testid="api_info_savebar"
    [formInitialValues]="initialApiDetailsFormValue"
    (submitted)="onSubmit()"
  ></gio-save-bar>
</form>
